<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="videoList h100p">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" backgroundColor="#FF7C00" :border="false">
        <view class="inputView flcv">
          <input confirm-type="search" v-model="keywords" type="text" class="input" placeholder="请输入搜索内容" @confirm="confirm" />
        </view>
      </uni-nav-bar>
    </view>
    <view :style="globalData.appStyle.contentStyle">
      <view class="listBox">
        <scroll-view scroll-y @scrolltolower="getVideoList" class="scrollList">
          <Gongzhonghao v-if="globalData.userInfo.isFollowOfficialAccount !== '1'" />
          <view v-for="(item, index) in videoList" :key="index" @click="cardClick(item)" :class="{ noTop: index === 0 }" class="itemBox">
            <view class="flb item">
              <view v-if="item.isNew === '1'" class="zd">新</view>
              <image :src="item.picUrl" class="img" />
              <view class="flc content">
                <view class="title f16 cGY3 bold ell2">{{ item.title }}</view>
                <view class="time f14 cGY2">{{ item.createTime }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
import Gongzhonghao from '@/component/Gongzhonghao.vue';
export default {
  mixins: [commonMxins],
  components: { Gongzhonghao },
  data() {
    return {
      keywords: '',
      videoList: [],
      pageSize: 20,
      pageNum: 1
    };
  },
  async onLoad() {
    await this.appInit();
    this.getVideoList();
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/videoPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/videoPage' };
    },
    async getVideoList() {
      let timestampFlag = 0; //第一次查询的是0
      let len = this.videoList.length;
      if (len > 0) {
        timestampFlag = this.videoList[len - 1].timestampFlag;
      }
      //这边为了防止丢数据(同一时间点N多人同时发)/查重复数据(刷新前有人发了新动态)，用timeStampFlag字段对动态进行排序，后端会对统一毫秒发的动态再加1毫秒，保证没有在同一时间有不同的人发动态
      let data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum++,
        keywords: this.keywords,
        timestampFlag
      };
      if (data.timestampFlag === 0) {
        delete data.timestampFlag;
      }
      let res = await api.request({ url: '/video/selectPage', data, method: 'GET' });
      console.log(this.videoList.length, res.data.length);
      this.videoList = [...this.videoList, ...res.data];
      if (res.data.length === 0) {
        uni.showToast({ title: '没有数据啦~~', icon: 'none' });
      }
    },
    confirm() {
      this.pageNum = 1;
      this.videoList = [];
      this.getVideoList();
    },
    cardClick(item) {
      wx.openChannelsActivity({ finderUserName: 'sph8ch1wsbT8rOa', feedId: item.feedId });
    }
  }
};
</script>
<style lang="scss" scoped>
.videoList {
  .listBox {
    height: 100%;
    padding: 0 12rem;
    box-sizing: border-box;
    .scrollList {
      height: 100%;
      .itemBox {
        margin-top: 8rem;
        padding: 12rem;
        box-sizing: border-box;
        background: rgba(255, 251, 247, 1);
        .item {
          border-radius: 10rem;
          overflow: hidden;
          position: relative;
          .zd {
            position: absolute;
            width: 90rem;
            height: 18rem;
            line-height: 18rem;
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            left: -30rem;
            top: 5rem;
            color: #fff;
            text-align: center;
            font-size: 12rem;
            background: #fa8d14;
          }
          .img {
            width: 90rem;
            height: 90rem;
            margin-right: 10rem;
          }
          .content {
            width: calc(100% - 100rem);
            .title {
              height: 70rem;
            }
            .time {
              height: 20rem;
              line-height: 20rem;
            }
          }
        }
        .noTop {
          margin-top: 0;
        }
      }
    }
  }
}
</style>
